import React,{ Component } from 'react';
import {
	View,
	Text,
	StyleSheet,
	Modal,
	TouchableOpacity,
	ScrollView,
	Image
} from 'react-native';

export default class SelectLink extends Component {
	constructor(props){
		super(props);
		this.sourceDataDeepArr = []
		this.sourceDataDeep = 0;
		this.bFloor = false;
		this.getSourceDataDeepArr(this.props.sourceData,this.sourceDataDeep);
		this.getSourceDataDeep(this.sourceDataDeepArr);
	}

	state = {
		isModal: this.props.visible,
		selectedTitleData: [],
		selectItemData:[]
	}

	onRequestClose = ()=>{
        this.setState({
            isModal:false
        });
    }
	
	getSourceDataDeep = (data)=>{
		let max = Math.max.apply(null,data);
		this.sourceDataDeep = max;
	}
	
	getSourceDataDeepArr = (data,deep)=>{
		data.map((item)=>{
			if(item.children){
				deep++
				this.getSourceDataDeepArr(item.children,deep)
			}else{
				this.sourceDataDeepArr.push(deep)
			}
		})
	}

	getFirstData = (data)=>{
		let selectItemData = data.map(item => item.name)
		//console.log("selectItemData",selectItemData)
		this.setState({ selectItemData });
	}

	getSelectItemData = (arr,name)=>{
		//console.log(arr)
		//console.log(name)
		let result = false;

		for (var i = 0; i < arr.length; i++) {
			let item = arr[i];
			if(item.name === name){
				if(item.children){
					result = [];
					item.children.map((item)=>{
						result.push(item.name)
					})
				}else{
					
				}
				break
			}else{
				if(item.children){
					result = this.getSelectItemData(item.children,name)
				}
			}
		}
		return result;
	}

	selecedItemClick = (name)=>{
		let selectItemData = this.getSelectItemData(this.props.sourceData,name);
		//console.log("selectItemData",selectItemData)
		let selectedTitleData = this.state.selectedTitleData;
		if(!this.bFloor && selectItemData){
			selectedTitleData.push(name);
		}else if(!this.bFloor && !selectItemData){
			selectedTitleData.push(name);
		}else if(this.bFloor&&selectItemData){
			selectedTitleData.pop()
			selectedTitleData.push(name)
		}else if(this.bFloor&&!selectItemData){
			selectedTitleData.pop()
			selectedTitleData.push(name)
		}
		
		if(selectItemData){
			this.bFloor = false;
			this.setState({ selectedTitleData,selectItemData })
		}else{
			this.bFloor = true;
			this.setState({ selectedTitleData })
		}
		
		
	}

	selectTitleClick = (data,name,index)=>{
		console.log(data,name,index)
		if(index === 0){
			this.state.selectedTitleData=[];
			this.selecedItemClick(name);
		}else if(index === this.sourceDataDeep-1){
			return false;
		}else{
			this.state.selectedTitleData=data.slice(0,index+1);
			this.bFloor=true;
			this.selecedItemClick(name);
		}
	}

    initSelectedTitle = (data)=>{
		var list = []

		data.map((item,index)=>{
			list.push(<TouchableOpacity key={index} onPress={()=>{this.selectTitleClick(data,item,index)}}><Text style={styles.selectedCell}>{item}</Text></TouchableOpacity>)
		})

		if(list.length !== this.sourceDataDeep && !this.bFloor){
			list.push(<TouchableOpacity key={list.length}><Text style={styles.selectedActive}>请选择</Text></TouchableOpacity>)
		}
		
		return list;
    }

    initSelectedItems = (data)=>{
    	//console.log("initSelectedItems",data)
    	if(data){
			return data.map((item,index) => {
				return <TouchableOpacity onPress={()=>this.selecedItemClick(item)} key={index}><Text style={styles.selectedItem}>{item}</Text></TouchableOpacity>
			})
		}
    }

    componentWillReceiveProps(nextProps){
		console.log(nextProps)
		this.setState({
			isModal:nextProps.visible
		})
    }

    componentDidMount (){
    	this.getFirstData(this.props.sourceData);
    }

    confirm = ()=>{
    	this.props.onSubmit(this.state.selectedTitleData)
    	this.setState({
    		isModal:false
    	})
    }

    cancel = ()=>{
    	this.setState({
    		isModal:false
    	})
    }

	render(){
		return <Modal
			transparent={true}
			visible={this.state.isModal}
			onRequestClose={() => {this.onRequestClose()}}  // android必须实现
		>
			<View style={styles.container}>
				<TouchableOpacity
					style={{width:'100%',flex:1}}
					onPress={()=>this.cancel()}
				>
					
				</TouchableOpacity>
				<View style={styles.selectMain}>
					<View style={styles.btnGroup}>
						<TouchableOpacity
							onPress={()=>this.cancel()}
						>
							<Text style={styles.btnTxt}>取消</Text>
						</TouchableOpacity>
						<TouchableOpacity 
							onPress={()=>this.confirm()}
						>
							<Text style={styles.btnTxt}>确定</Text>
						</TouchableOpacity>
					</View>
					<View style={styles.selectedList}>
						<ScrollView
							horizontal={true}
						>
							{
								this.initSelectedTitle(this.state.selectedTitleData)
								// <TouchableOpacity><Text style={styles.selectedCell}>收入降收</Text></TouchableOpacity>
								// <TouchableOpacity><Text style={styles.selectedCell}>显性</Text></TouchableOpacity>
								// <TouchableOpacity><Text style={styles.selectedActive}>请选择</Text></TouchableOpacity>
							}
						</ScrollView>
					</View>
					<ScrollView style={styles.selectedItemList}>
						{
							this.initSelectedItems(this.state.selectItemData)
							// <TouchableOpacity><Text style={styles.selectedItem}>用户流失</Text></TouchableOpacity>
							// <TouchableOpacity style={styles.selectedItemWrap}>
							// 	<Text style={styles.selectedItemActive}>在网用户降收</Text>
							// 	<Image 
							// 		style={styles.selectIcon} 
							// 		source={require("../assets/images/icon_selected.png")}
							// 	/>
							// </TouchableOpacity>
						}
					</ScrollView>
				</View>
			</View>
		</Modal>
	}
}


const styles = StyleSheet.create({
	container:{
		flex:1,
		alignItems:'center',
		justifyContent:'flex-end',
		backgroundColor:'rgba(0,0,0,.2)'
	},
	selectMain:{
		backgroundColor:'#fff',
		width:'100%',
		height:280
	},
	btnGroup:{
		borderBottomWidth:1,
		paddingLeft:10,
		paddingRight:10,
		borderBottomColor:'#eee',
		height:40,
		alignItems:'center',
		justifyContent:'space-between',
		flexDirection:'row',
	},
	btnTxt:{
		color:'#f54545',
		fontSize:17
	},
	selectedList:{
		height:40,
		paddingLeft:10,
		paddingRight:10,
		borderBottomWidth:1,
		borderBottomColor:'#fafafa'
	},
	selectedCell:{
		lineHeight:40,
		marginRight:20,
		fontSize:15
	},
	selectedActive:{
		height:40,
		lineHeight:40,
		fontSize:15,
		color:"#f54545"
	},
	selectedItemList:{
		flex:1,
		marginTop:5,
		marginLeft:10,
		marginRight:10,
		marginBottom:10
	},
	selectedItem:{
		lineHeight:26
	},
	selectedItemActive:{
		lineHeight:26,
		color:'#f54545'
	},
	selectIcon:{
		width:20,
		height:20,
		marginLeft:10
	},
	selectedItemWrap:{
		flexDirection:'row',
		alignItems:'center'
	}
})











